<template>
  <div>
    <div>
      <eagle-input
        label="事故编号"
        v-model="form.AccidentNumber"
        name="AccidentNumber"
        readonly
      ></eagle-input>
      <eagle-input
        label="事故名称"
        v-model="form.AccidentName"
        name="AccidentName"
        type="textarea"
        rows="1"
        autosize
        readonly
      ></eagle-input>
      <eagle-input
        label="对象"
        v-model="form.AccidentObject"
        v-if="
          form.SystemAccidentObject == 'A' || form.SystemAccidentObject == null
        "
        name="AccidentObject"
        type="textarea"
        rows="1"
        autosize
        required
        isInputText
        @input="onChangeAccidentObject"
        placeholder="请输入事故对象"
      ></eagle-input>
      <eagle-input
        label="后果"
        v-model="form.Consequence"
        name="Consequence"
        type="textarea"
        rows="2"
        autosize
        @input="onConsequence"
        required
        isInputText
        placeholder="请输入后果"
      ></eagle-input>
      <!-- <van-field
        name="AccidentDepartmentName"
        v-model="form.AccidentDepartmentName"
        label="事故发生部门"
        placeholder="请选择"
        @click="goDeptment"
        required
      > -->
      <van-field
        readonly
        class="input_text"
        name="AccidentDepartmentName"
        v-model="form.AccidentDepartmentName"
        label="事故发生部门"
        placeholder="请选择"
        @click-input="goDeptment"
        required
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearOrgCode"
          />
        </template>
      </van-field>

      <eagle-date-picker
        label="事故发生日期"
        v-model="form.AccidentDate"
        style="align-items: center;margin-left: -7px"
        required
        @cancel="show = false"
        @confirm="confirmPicker1"
      ></eagle-date-picker>
      <eagle-input
        label="事故简介"
        v-model="form.Remarks"
        type="textarea"
        error-message="1.简洁；
                2.仅限于已知的事实（日期、时间、地点、发生的情况、所采取的立即行动的描述），不加任何修饰和臆断3.事故概述中应避免出现当事人的姓名。"
        rows="2"
        autosize
        required
        isInputText
      />
      <eagle-radio-group
        name="ProcessClassification"
        label="工艺分类"
        v-model="form.ProcessClassification"
        :dataSource="form.ProcessClassificationList"
        direction="horizontal"
        @change="processClassificationChange"
        required
      >
      </eagle-radio-group>
      <eagle-radio-group
        name="AttidentClassification"
        label="事故分类"
        :show="form.ProcessClassification == 'A'"
        v-model="form.AttidentClassification"
        :dataSource="form.AccidentProcessList"
        direction="horizontal"
        @change="attidentClassifyChange"
        required
      >
      </eagle-radio-group>
      <eagle-radio-group
        name="AttidentClassification"
        label="事故分类"
        :show="form.ProcessClassification == 'B'"
        v-model="form.AttidentClassification"
        :dataSource="form.AccidentFreeProcessList"
        direction="horizontal"
        @change="attidentClassifyChange"
        required
      >
      </eagle-radio-group>
      <eagle-checkgroup
        v-show="isShow(1)"
        v-model="harmArr"
        :dataSource="form.HarmList"
        label="伤害/职业病"
        :option="{label:'Name',value:'ID'}"
        direction="horizontal"
        @change="harmChange"
        style="margin-left: -7px"
        required
      ></eagle-checkgroup>
      <!-- <eagle-checkgroup
          v-model="HSEManagementList"
          :dataSource="form.HarmList"
          label="伤害/职业病"
          :option="{label:'Name',value:'ID'}"
          direction="horizontal"
          @change="handHSEManagementList"
          class="input_text"
          required
        ></eagle-checkgroup> -->
      <eagle-input
        v-if="isShow(2)"
        label="火灾爆炸涉及范围"
        v-model="form.InvolveScope"
        name="InvolveScope"
        type="textarea"
        rows="1"
        autosize
        required
        isInputText
      ></eagle-input>
      <eagle-input
        v-if="isShow(3)"
        label="环境污染范围"
        v-model="form.PolluteScope"
        name="PolluteScope"
        type="textarea"
        rows="1"
        autosize
        isInputText
        required
      ></eagle-input>
      <eagle-input
        v-if="isShow(4)"
        label="泄露物质"
        v-model="form.RevealMatter"
        name="RevealMatter"
        type="textarea"
        rows="1"
        isInputText
        autosize
        required
      ></eagle-input>
      <eagle-input
        v-if="isShow(4)"
        label="泄露量"
        v-model="form.Spillage"
        name="Spillage"
        type="textarea"
        rows="1"
        isInputText
        required
        autosize
      ></eagle-input>
      <eagle-input
        v-if="isShow(5)"
        label="生产异常影响范围"
        v-model="form.SphereInfluence"
        name="SphereInfluence"
        type="textarea"
        autosize
        rows="1"
        isInputText
        required
      ></eagle-input>
      <eagle-input
        v-if="isShow(7)"
        label="直接财产损失"
        v-model="form.DirectPropertyLoss"
        name="DirectPropertyLoss"
        type="textarea"
        autosize
        rows="1"
        isInputText
        required
      ></eagle-input>
      <van-field
        class="input_text"
        name="radio"
        label="事故分级"
        required
        v-if="
          form.ProcessClassification == 'A' || form.ProcessClassification == 'B'
        "
      >
        <template #input>
          <van-radio-group
            v-model="form.AttidentgRading"
            direction="horizontal"
          >
            <van-radio
              v-for="(item, index) in form.AttidentgRadingList"
              :key="index"
              :name="item.ID"
              style="margin: 0 10px 10px 0"
            >{{ item.Name }}</van-radio>

            <div>
              <a
                @click="explain"
                style="color: #00c1de"
              >说明</a>
            </div>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        class="input_text"
        name="radio"
        label="潜在风险"
        required
      >
        <template #input>
          <van-radio-group
            v-model="form.PotentialRisk"
            direction="horizontal"
          >
            <van-radio
              v-for="(item, index) in form.PotentialRiskList"
              :key="index"
              :name="item.ID"
              style="margin: 0 10px 10px 0"
            >{{ item.Name }}</van-radio>

            <div>
              <a
                @click="potentialRiskShow1"
                style="color:#00c1de"
              >说明</a>
            </div>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field label="事故经过" v-model="form.DetailsTheAccident" type="textarea" placeholder="请输入事故经过" rows="2" autosize /> -->
      <eagle-input
        label="事故造成的影响"
        v-model="form.AccidentConsequence"
        type="textarea"
        placeholder="请输入事故造成的影响"
        rows="2"
        autosize
        isInputText
        required
      ></eagle-input>
      <div class="report-block">
        <!-- <div slot="title">
                    <van-tag type="primary" size="large" mark>时间事件链</van-tag>
                </div> -->

        <van-collapse v-model="activeNames">
          <van-collapse-item
            name="1"
            class="cell-time-line"
          >
            <template #value>

              <van-tag
                type="primary"
                size="large"
                mark
              ><span style="color:#c03131">* </span> 时间事件链</van-tag>
              <van-button
                type="primary"
                size="small"
                class="valueclass"
                @click.stop="addDetails()"
              >新增</van-button>
            </template>
            <van-list style="margin: 10px">
              <eagle-cell
                style="margin-top: 10px"
                class="cell-item"
                v-for="(item, index) in form.Details"
                :key="index"
              >
                <eagle-row>
                  <eagle-col span="24">
                    日期/时间：{{ item.AccidentDate1 | formatDateTime }}
                  </eagle-col>
                </eagle-row>
                <eagle-row
                  gutter="20"
                  class="dep_sort"
                >
                  <eagle-col span="24">
                    事件描述：{{ item.IncidentDescription }}
                  </eagle-col>
                </eagle-row>
                <eagle-row
                  gutter="20"
                  class="dep_sort"
                >
                  <eagle-col span="24">
                    备注/证据说明：{{ item.EvidenceDescription }}
                  </eagle-col>
                </eagle-row>
                <eagle-row style="">
                  <!-- <eagle-col span="9"> </eagle-col> -->
                  <eagle-col span="4">
                    <van-button
                      size="small"
                      @click="editTimeEventChain(item, index)"
                    >编辑</van-button>
                  </eagle-col>
                  <eagle-col span="4">
                    <van-button
                      size="small"
                      type="danger"
                      @click="deleteTimeEventChain(index)"
                    >删除</van-button>
                  </eagle-col>
                  <eagle-col span="4">
                    <van-button
                      size="small"
                      @click="up(index)"
                    >上移</van-button>
                  </eagle-col>
                  <eagle-col span="4">
                    <van-button
                      size="small"
                      @click="down(index)"
                    >下移</van-button>
                  </eagle-col>
                  <eagle-col span="7">
                    <van-button
                      size="small"
                      @click="setconfirmKeyFactor(item.IncidentDescription)"
                    >设置关键因素</van-button>
                  </eagle-col>
                </eagle-row>
              </eagle-cell>
            </van-list>
          </van-collapse-item>
        </van-collapse>

      </div>

      <div class="report-block">
        <div
          slot="title"
          style="padding-top: 5px;"
        >
          <van-tag
            type="primary"
            size="large"
            mark
          >原因分析</van-tag>
        </div>
        <div
          class="det_tab"
          style="padding: 0"
        >
          <div class="det_tab_item">
            <!-- <van-tag type="primary" style="margin-left:0.45rem;" size="large" mark></van-tag> -->
            <eagle-input
              label="分析过程"
              v-model="form.ReasonAnalysis"
              type="textarea"
              placeholder="请输入原因分析"
              rows="2"
              autosize
              required
              isInputText
            />
            <van-collapse v-model="activeNamesFactor">
              <van-collapse-item name="1">
                <div slot="title">
                  <div>
                    <span class="title mr-30"><span style="color:#c03131;margin-left: -10px">* </span>关键因素</span>
                  </div>
                </div>
                <van-list style="margin: 10px">
                  <eagle-cell
                    style="margin-top: 10px;margin-left: -15px"
                    class="cell-item"
                    v-for="(item, index) in form.Details2"
                    :key="index"
                  >
                    <eagle-row>
                      <eagle-col span="20">
                        {{ item.KeyFactor }}
                      </eagle-col>
                      <eagle-col span="4">
                        <van-button
                          size="small"
                          type="danger"
                          @click="deleteKeyFactor(index)"
                        >移除</van-button>
                      </eagle-col>
                    </eagle-row>
                  </eagle-cell>
                </van-list>
              </van-collapse-item>
            </van-collapse>
            <eagle-input
              label="直接原因"
              v-model="form.ImmediateCause"
              type="textarea"
              placeholder="请输入直接原因"
              rows="2"
              autosize
              isInputText
              required
            />
            <eagle-input
              label="根本原因"
              v-model="form.PrimaryCause"
              type="textarea"
              placeholder="请输入根本原因"
              rows="2"
              autosize
              isInputText
              required
            />
          </div>
        </div>
      </div>

      <div class="report-block">
        <!-- <div slot="title">
                    <van-tag type="primary" size="large" mark>整改与预防措施</van-tag>
                </div> -->
        <div
          class="det_tab"
          style="padding: 0"
        >
          <van-collapse v-model="activeNamesCorrectiveAction">
            <van-collapse-item
              name="1"
              class="cell-time-line"
            >
              <template slot="value">
                <van-tag
                  type="primary"
                  size="large"
                  mark
                ><span style="color:#c03131">*</span> 整改与预防措施</van-tag>
                <van-button
                  type="primary"
                  size="small"
                  class="valueclass"
                  @click.stop="addCorrectiveActionDetails()"
                >新增
                </van-button>
              </template>
              <van-list style="margin: 10px">
                <eagle-cell
                  style="margin-top: 10px"
                  class="cell-item"
                  v-for="(item, index) in form.Details3"
                  :key="index"
                >
                  <eagle-row>
                    <eagle-col span="24">
                      整改行动：{{ item.CorrectiveAction }}
                    </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24">
                      责任人：{{ item.PersonLiable }}
                    </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="24">
                      完成日期：{{ item.FinishDate | formatDate }}
                    </eagle-col>
                  </eagle-row>
                  <eagle-row>
                    <eagle-col span="16"> </eagle-col>
                    <eagle-col span="4">
                      <van-button
                        size="small"
                        @click="editCorrectiveAction(item, index)"
                      >编辑</van-button>
                    </eagle-col>
                    <eagle-col span="4">
                      <van-button
                        size="small"
                        type="danger"
                        @click="deleteCorrectiveAction(index)"
                      >删除</van-button>
                    </eagle-col>
                  </eagle-row>
                </eagle-cell>
              </van-list>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>

      <div class="report-block">
        <!-- <div slot="title">
                    <van-tag type="primary" size="large" mark>事故调查小组</van-tag>
                </div> -->

        <van-collapse v-model="activeNamesInvestigateGroup">
          <van-collapse-item
            name="1"
            class="cell-time-line"
          >
            <template #value>
              <van-tag
                type="primary"
                size="large"
                mark
              >事故调查小组</van-tag>
              <van-button
                type="primary"
                size="small"
                class="valueclass"
                @click.stop="getUserChooseDialogShow2()"
              >新增
              </van-button>
            </template>
            <van-list style="margin: 10px">
              <eagle-cell
                style="margin-top: 10px"
                class="cell-item"
                v-for="(item, index) in form.Details4"
                :key="index"
              >
                <eagle-row>
                  <eagle-col span="24"> 角色：{{ getRole(item.Role) }} </eagle-col>
                </eagle-row>
                <eagle-row>
                  <eagle-col span="24"> 名称：{{ item.Name }} </eagle-col>
                </eagle-row>
                <eagle-row>
                  <eagle-col span="24"> 职务：{{ item.AccidentDuty }} </eagle-col>
                </eagle-row>
                <eagle-row>
                  <eagle-col span="24"> 电话：{{ item.Phone }} </eagle-col>
                </eagle-row>
                <eagle-row>
                  <eagle-col span="24"> 邮件：{{ item.Email }} </eagle-col>
                </eagle-row>
                <eagle-row>
                  <eagle-col
                    v-if="item.Role == 'B'"
                    span="16"
                  > </eagle-col>
                  <eagle-col
                    v-else
                    span="20"
                  > </eagle-col>
                  <eagle-col span="4">
                    <van-button
                      size="small"
                      @click="editInvestigateGroup(item, index)"
                    >编辑</van-button>
                  </eagle-col>
                  <van-col
                    span="4"
                    v-if="item.Role == 'B'"
                  >
                    <van-button
                      size="small"
                      type="danger"
                      @click="deleteInvestigateGroup(index)"
                    >删除</van-button>
                  </van-col>
                </eagle-row>
              </eagle-cell>
            </van-list>
          </van-collapse-item>
        </van-collapse>
      </div>

      <div class="report-block">
        <eagle-checkgroup
          v-model="HSEManagementList"
          :dataSource="form.HSEManagementList"
          label="需要加强的HSE管理要素"
          :option="{label:'Name',value:'ID'}"
          direction="horizontal"
          @change="handHSEManagementList"
          class="input_text"
          required
        ></eagle-checkgroup>
        <eagle-input
          label="经验教训
"
          v-model="form.InvestigationTeam"
          type="textarea"
          rows="2"
          autosize
          isInputText
          required
        />
        <eagle-file-upload
          @CallBack="_fileUploadCb"
          :attachs="form.Attachs"
          :labelName="'附件'"
        ></eagle-file-upload>
      </div>
      <div
        style="margin: 16px"
        v-if="form.IsAssignedMe==false || this.allList"
      >
        <van-button
          round
          block
          type="info"
          @click="save(false)"
        >暂存</van-button>
      </div>
      <div
        class="bottom-btns"
        v-if="form.IsAssignedMe && this.allList == false"
      >
        <van-button
          type="primary"
          class="submit-two"
          @click="save(true)"
        >
          保存并提交
        </van-button>
        <van-button
          class="submit-two ml-10"
          type="info"
          @click="save(false)"
        >
          暂存
        </van-button>
      </div>
    </div>

    <!-- 弹出层 -->
    <eagle-dialog
      title="新增时间事件链"
      @confirm="confirm"
      v-model="show"
      ref="timelinkEagleDialog"
      @close="show = false"
    >
      <div style="height: 7rem; overflow-y: auto">
        <div class="gist-source">
          <eagle-date-picker
            label="日期/时间"
            v-model="timeEventChain.AccidentDate1"
            style="align-items: center"
            required
            @cancel="timeShow = false"
            @confirm="confirmPicker"
          >
          </eagle-date-picker>
        </div>
        <div class="gist-source">
          <eagle-input
            label="事件描述"
            v-model="timeEventChain.IncidentDescription"
            required
            type="textarea"
            rows="2"
            autosize
            isInputText
          ></eagle-input>
        </div>
        <div class="gist-source">
          <eagle-input
            label="备注/证据说明"
            v-model="timeEventChain.EvidenceDescription"
            required
            type="textarea"
            rows="2"
            autosize
            isInputText
          ></eagle-input>
        </div>
      </div>
    </eagle-dialog>
    <!-- 关键因素 -->
    <eagle-dialog
      title="新增关键因素"
      @confirm="confirmKeyFactor"
      v-model="factorShow"
      ref="factorEagleDialog"
      @close="factorShow = false"
    >
      <div style="height: 7rem; overflow-y: auto">
        <div class="gist-source">
          <eagle-input
            label="关键因素"
            v-model="keyFactor.KeyFactor"
            required
            type="textarea"
            rows="2"
            autosize
            isInputText
          ></eagle-input>
        </div>
      </div>
    </eagle-dialog>

    <!-- 整改与预防措施 -->
    <eagle-dialog
      title="新增整改与预防措施"
      @confirm="confirmCorrectiveAction"
      v-model="correctiveActionShow"
      ref="correctiveActionEagleDialog"
      @close="correctiveActionShow = false"
    >
      <div style="height: 8rem; overflow-y: auto">
        <div class="gist-source">
          <eagle-input
            label="整改行动"
            type="textarea"
            rows="3"
            autosize
            v-model="correctiveAction.CorrectiveAction"
            required
            isInputText
          ></eagle-input>
        </div>
        <div class="gist-source">
          <van-field
            readonly
            class="input_text"
            name="PersonLiable"
            v-model="correctiveAction.PersonLiable"
            label="责任人"
            placeholder="请选择"
            required
            @click-input="getUserChooseDialogShow1"
          >
            <template #button>
              <van-icon
                name="cross"
                @click="clearPeopleCode"
              />
            </template>
          </van-field>
        </div>
        <div class="gist-source">
          <eagle-date
            label="完成日期"
            required
            ref="eagleDate"
            :date.sync="correctiveAction.FinishDate"
          ></eagle-date>
        </div>
      </div>
    </eagle-dialog>

    <!-- 事故调查小组 -->
    <eagle-dialog
      title="事故调查小组新增"
      @confirm="confirmInvestigateGroup"
      v-model="investigateGroupShow"
      ref="investigateGroupEagleDialog"
      @close="investigateGroupShow = false"
    >
      <div style="height: 8rem; overflow-y: auto">
        <div class="gist-source">
          <van-field
            class="input_text"
            name="radio"
            label="角色"
            readonly
          >
            <template #input>
              <van-radio-group
                v-model="investigateGroup.Role"
                direction="horizontal"
                disabled
              >
                <van-radio
                  name="A"
                  style="margin: 0 10px 10px 0"
                >组长</van-radio>
                <van-radio
                  name="B"
                  style="margin: 0 10px 10px 0"
                >员工</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <!-- <van-field label="角色" v-model="investigateGroup.Role" placeholder="请输入角色"> </van-field> -->
        </div>
        <div class="gist-source">
          <eagle-input
            label="姓名"
            v-model="investigateGroup.Name"
            required
            isInputText
          >
          </eagle-input>
        </div>
        <div class="gist-source">
          <eagle-input
            label="职务"
            v-model="investigateGroup.AccidentDuty"
            isInputText
          >
          </eagle-input>
        </div>
        <div class="gist-source">
          <eagle-input
            label="电话"
            v-model="investigateGroup.Phone"
            isInputText
          > </eagle-input>
        </div>
        <div class="gist-source">
          <eagle-input
            label="电子邮件"
            v-model="investigateGroup.Email"
            isInputText
          >
          </eagle-input>
        </div>
      </div>
    </eagle-dialog>
    <deptment-choose
      :show.sync="deptmentShow"
      :selectedValue="form.AccidentDepartmentOrg"
      @callback="_chooseDeptmentCb"
      :isMulti="false"
      ref="deptmentChoose"
    >
          </deptment-choose>
    <van-popup
      v-model="TheRatingShow"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title">{{ this.title1 }}</div>
      <div class="popup-content">
        <ExplainList
          :Type="form.ProcessClassification"
          ref="ExplainList"
        ></ExplainList>
      </div>
    </van-popup>
    <user-choose-dialog
      title="选择责任人"
      :show.sync="userChooseDialogShow1"
      :IsAccounted="true"
      :isMulti="false"
      @callback="userChooseCallback1"
    >
    </user-choose-dialog>
    <user-choose-dialog
      title="选择事故调查人员"
      :show.sync="userChooseDialogShow2"
      :IsAccounted="true"
      :isMulti="true"
      :type="'100'"
      @callback="userChooseCallback2"
    >
    </user-choose-dialog>
    <van-popup
      v-model="PotentialRiskShow"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title">{{this.title1}}</div>
      <div class="popup-content">
        <OverStatusDescription :Type="'PotentialRisk'"></OverStatusDescription>
      </div>
    </van-popup>
  </div>
</template>
<script>
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import { mapGetters } from "vuex";
import store from "@/store/index";
import ExplainList from "@/views/components/wh/explainList";
import OverStatusDescription from "@/views/components/wh/overStatusDescription";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
export default {
  components: {
    DeptmentChoose,
    UserChooseDialog,
    ExplainList,
    OverStatusDescription,
  },
  data() {
    return {
      id: 0,
      form: {},
      AttidentClassificationArr: [], //checkboxgroup 必须是数组类型
      harmArr: [],
      minDate: new Date(2015, 0, 1),
      userChooseDialogShow2: false,
      activeNames: ["1"],
      timeEventChain: {
        ID: 0,
        AccidentDate1: null,
        IncidentDescription: "",
        EvidenceDescription: "",
        index: -1,
      },
      TheRatingShow: false,
      userChooseDialogShow1: false,
      deptmentShow: false,
      PotentialRiskShow: false,
      correctiveAction: {
        CorrectiveAction: "",
        PersonLiable: "",
        FinishDate: "",
        PersonLiableOrg: "",
        index: -1,
      },
      keyFactor: {
        KeyFactor: "",
        index: -1,
      },
      investigateGroup: {
        Role: "",
        Name: "",
        AccidentDuty: "",
        Phone: "",
        Email: "",
        index: -1,
      },
      title1: "",
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      timeValue: "请选择时间",
      timeShow: false,
      timeShow1: false,
      isLoadingShow: true,
      className: "",
      activeNamesFactor: ["1"],
      factorShow: false,
      activeNamesCorrectiveAction: ["1"],
      correctiveActionShow: false,
      activeNamesInvestigateGroup: ["1"],
      investigateGroupShow: false,
      dateShow: false,
      show1: false,
      HSEManagementList: [],
      allList: false,
    };
  },
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },
  created() {
    let id = this.$route.query.id;
    if (this.$route.query.allList) {
      this.allList = this.$route.query.allList;
    }
    this.id = id;
    this.calcTitle();
    this.getDangerDetail(id);
  },
  methods: {
    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },
    getDangerDetail(id1) {
      var _this = this;
      _this.$axios
        .get("/WhInvestigationReport/GetDetail", { params: { id: id1 } })
        .then((res) => {
          _this.form = res.data;

          if (res.data.Harm != null) {
            _this.harmArr = res.data.Harm.split(",");
          }
          if (res.data.HSEManagement != null) {
            _this.HSEManagementList = res.data.HSEManagement.split(",");
          }
          _this.confirmPicker1(new Date(res.data.AccidentDate));

          _this.edit = true;
        });
    },
    save(IsPublish) {
      if (
        !this.form.AccidentObject &&
        IsPublish &&
        (this.form.SystemAccidentObject == "A" ||
          this.form.SystemAccidentObject == null)
      ) {
        this.$toast("请输入对象");
        return;
      }
      if (!this.form.Consequence && IsPublish) {
        this.$toast("请输入后果");
        return;
      }
      if (!this.form.AccidentDepartmentName && IsPublish) {
        this.$toast("请选择事故发生部门");
        return;
      }
      if (!this.form.AccidentDate && IsPublish) {
        this.$toast("请选择事故发生日期");
        return;
      }
      if (!this.form.Remarks && IsPublish) {
        this.$toast("请输入简介");
        return;
      }
      if (!this.form.TakeImmediateAction && IsPublish) {
        this.$toast("请输入立即采取的行动");
        return;
      }
      if (!this.form.ProcessClassification && IsPublish) {
        this.$toast("请选择工艺分类");
        return;
      }
      if (!this.form.AttidentClassification && IsPublish) {
        this.$toast("请选择事故分类");
        return;
      }
      if (
        !this.form.Harm &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "1" &&
        IsPublish
      ) {
        this.$toast("请选择伤害/职业病");
        return;
      }
      if (
        !this.form.InvolveScope &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "2" &&
        IsPublish
      ) {
        this.$toast("请输入火灾爆炸涉及范围");
        return;
      }
      if (
        !this.form.PolluteScope &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "3" &&
        IsPublish
      ) {
        this.$toast("请输入环境污染范围");
        return;
      }
      if (
        !this.form.RevealMatter &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "4" &&
        IsPublish
      ) {
        this.$toast("请输入泄露物质");
        return;
      }
      if (
        !this.form.Spillage &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "4" &&
        IsPublish
      ) {
        this.$toast("请输入泄露量");
        return;
      }
      if (
        !this.form.SphereInfluence &&
        this.form.ProcessClassification == "A" &&
        this.form.AttidentClassification == "5" &&
        IsPublish
      ) {
        this.$toast("请输入生产异常影响范围");
        return;
      }
      if (
        !this.form.InvolveScope &&
        this.form.ProcessClassification == "B" &&
        this.form.AttidentClassification == "2" &&
        IsPublish
      ) {
        this.$toast("请输入火灾爆炸涉及范围");
        return;
      }
      if (
        !this.form.PolluteScope &&
        this.form.ProcessClassification == "B" &&
        this.form.AttidentClassification == "3" &&
        IsPublish
      ) {
        this.$toast("请输入环境污染范围");
        return;
      }
      if (
        !this.form.DirectPropertyLoss &&
        this.form.ProcessClassification == "B" &&
        this.form.AttidentClassification == "7" &&
        IsPublish
      ) {
        this.$toast("请输入直接财产损失");
        return;
      }
      if (!this.form.AttidentgRading && IsPublish) {
        this.$toast("请选择事故分级");
        return;
      }
      if (!this.form.PotentialRisk && IsPublish) {
        this.$toast("请选择潜在风险");
        return;
      }
      if (!this.form.AccidentConsequence && IsPublish) {
        this.$toast("请输入事故造成的影响");
        return;
      }
      if (!this.form.ReasonAnalysis && IsPublish) {
        this.$toast("请输入原因分析");
        return;
      }
      if (!this.form.ImmediateCause && IsPublish) {
        this.$toast("请输入直接原因");
        return;
      }
      if (!this.form.PrimaryCause && IsPublish) {
        this.$toast("请输入根本原因");
        return;
      }
      if (!this.form.HSEManagement && IsPublish) {
        this.$toast("请选择需要加强的HSE管理要素");
        return;
      }
      if (!this.form.InvestigationTeam && IsPublish) {
        this.$toast("请输入经验教训");
        return;
      }
      this.loading = true;
      let form1 = this.form;
      form1.IsPublish = IsPublish;
      this.$axios
        .post("/WhInvestigationReport/Save", form1)
        .then((res) => {
          this.loading = false;
          this.$toast.success("保存成功！");
          setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    isShow(value) {
      if (
        this.form.AttidentClassification &&
        this.form.AttidentClassification.indexOf(value) > -1 &&
        (value != "4" || this.form.ProcessClassification == "A") &&
        (value != "5" || this.form.ProcessClassification == "A") &&
        (value != "7" || this.form.ProcessClassification == "B")
      ) {
        return true;
      }
      return false;
    },
    harmChange() {
      this.form.Harm = this.harmArr.join();
    },
    processClassificationChange(val) {
      if (this.edit == true) {
        this.edit = false;
        return false;
      } else {
        this.form.AttidentClassification = null;
        this.AttidentClassificationArr = [];
        this.harmArr = [];
        this.form.Harm = null;
        this.form.InvolveScope = null;
        this.form.PolluteScope = null;
        this.form.RevealMatter = null;
        this.form.Spillage = null;
        this.form.SphereInfluence = null;
        this.form.DirectPropertyLoss = null;
      }
    },
    attidentClassifyChange(val) {
      if (this.edit == true) {
        this.edit = false;
        return false;
      } else if (val) {
        this.harmArr = [];
        this.form.Harm = null;
        this.form.InvolveScope = null;
        this.form.PolluteScope = null;
        this.form.RevealMatter = null;
        this.form.Spillage = null;
        this.form.SphereInfluence = null;
        this.form.DirectPropertyLoss = null;
      }
    },
    onChangeAccidentObject(val) {
      if (
        this.form.SystemAccidentObject == "A" ||
        this.form.SystemAccidentObject == null
      ) {
        this.form.AccidentName = val + this.form.Consequence;
      }
    },
    onConsequence(val) {
      if (
        this.form.SystemAccidentObject == "A" ||
        this.form.SystemAccidentObject == null
      ) {
        this.form.AccidentName = this.form.AccidentObject + val;
      } else {
        this.form.AccidentName = val;
      }
      // this.form.AccidentName =
      //     this.form.AccidentPlace + this.form.AccidentObject + val;
    },
    handHSEManagementList() {
      this.form.HSEManagement = this.HSEManagementList.join();
    },
    addDetails() {
      this.show = true;
      this.initTimeEventChain();
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.timeEventChain.AccidentDate1 =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
    },
    userChooseCallback1(data) {
      this.correctiveAction.PersonLiable = data.name;
      this.correctiveAction.PersonLiableOrg = data.code;
      this.userChooseDialogShow1 = false;
      // this.form.Details3.push({
      //     PersonLiable: data[0].name,
      //     PersonLiableOrg: data[0].code,
      // });
    },
    userChooseCallback2(data) {
      this.userChooseDialogShow2 = false;
      this.form.Details4.forEach((item1) => {
        data = data.filter((item) => item.name != item1.Name);
      });
      data.forEach((item) => {
        this.form.Details4.push({
          Role: "B",
          Name: item.name,
          AccidentDuty: item.PostName,
          Phone: item.Mobile,
          Email: item.Email,
        });
      });
    },
    // dateClick(date) {
    //   this.$refs.eagleDate.get(date);
    // },
    confirm() {
      if (!this.timeEventChain.AccidentDate1) {
        this.$toast("请选择日期/时间");
        return;
      }
      if (!this.timeEventChain.IncidentDescription) {
        this.$toast("请输入事件描述");
        return;
      }
      if (!this.timeEventChain.EvidenceDescription) {
        this.$toast("请输入注/证据说明");
        return;
      }
      if (this.timeEventChain.index >= 0) {
        var editData = this.form.Details[this.timeEventChain.index];
        editData.AccidentDate1 = this.timeEventChain.AccidentDate1;
        editData.IncidentDescription = this.timeEventChain.IncidentDescription;
        editData.EvidenceDescription = this.timeEventChain.EvidenceDescription;
      } else {
        this.form.Details.push({
          ID: 0,
          AccidentDate1: this.timeEventChain.AccidentDate1,
          IncidentDescription: this.timeEventChain.IncidentDescription,
          EvidenceDescription: this.timeEventChain.EvidenceDescription,
        });
      }
      this.initTimeEventChain();
      this.show = false;
    },
    initTimeEventChain() {
      this.timeEventChain.ID = 0;
      this.timeEventChain.AccidentDate1 = null;
      this.timeEventChain.IncidentDescription = "";
      this.timeEventChain.EvidenceDescription = "";
      this.timeEventChain.index = -1;
    },
    close() {
      this.show = false;
      this.timeEventChain.AccidentDate1 = null;
      this.timeEventChain.IncidentDescription = "";
      this.timeEventChain.EvidenceDescription = "";
    },
    getRole(val) {
      if (val == "A") {
        return "组长";
      } else {
        return "组员";
      }
    },
    // 显示弹窗
    showPopup() {
      this.timeShow = true;
      this.isLoadingShow = true;
      setTimeout(() => {
        this.isLoadingShow = false;
      }, 500);
    },
    showPopup1() {
      this.timeShow1 = true;
      this.isLoadingShow = true;
      setTimeout(() => {
        this.isLoadingShow = false;
      }, 500);
    },
    // 确认选择的时间
    confirmPicker(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.className = "timeClass";
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`;
      this.timeShow = false;
      this.timeEventChain.AccidentDate1 = this.timeValue;
    },
    confirmPicker1(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      this.className = "timeClass";
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`;
      this.timeShow1 = false;
      this.form.AccidentDate = this.timeValue;
    },
    editTimeEventChain(data, index) {
      this.timeEventChain.AccidentDate1 = data.AccidentDate1;
      this.timeEventChain.IncidentDescription = data.IncidentDescription;
      this.timeEventChain.EvidenceDescription = data.EvidenceDescription;
      this.timeEventChain.index = index;
      this.show = true;
    },
    deleteTimeEventChain(index) {
      this.form.Details.splice(index, 1);
    },
    addFactorDetails() {
      this.factorShow = true;
    },
    potentialRiskShow1() {
      this.PotentialRiskShow = true;
      this.title1 = "潜在风险说明";
    },
    initKeyFactor() {
      this.keyFactor.KeyFactor = "";
      this.keyFactor.index = -1;
    },
    setconfirmKeyFactor(KeyFactor1) {
      var i = 0;
      if (this.form.Details2.length > 0) {
        this.form.Details2.forEach((item) => {
          if (item.KeyFactor == KeyFactor1) {
            i = 1;
            return false;
          }
        });
      }
      if (i == 0) {
        this.form.Details2.push({
          KeyFactor: KeyFactor1,
        });
      }

      this.initKeyFactor();
      this.factorShow = false;
    },
    confirmKeyFactor() {
      if (!this.keyFactor.KeyFactor) {
        this.$toast("请输入关键因素");
        return;
      }
      if (this.keyFactor.index >= 0) {
        var editData = this.form.Details2[this.keyFactor.index];
        editData.KeyFactor = this.keyFactor.KeyFactor;
      } else {
        this.form.Details2.push({
          KeyFactor: this.keyFactor.KeyFactor,
        });
      }
      this.initKeyFactor();
      this.factorShow = false;
    },
    closeKeyFactor() {
      this.factorShow = false;
    },
    editKeyFactor(data, index) {
      this.keyFactor.KeyFactor = data.KeyFactor;
      this.keyFactor.index = index;
      this.factorShow = true;
    },
    deleteKeyFactor(index) {
      this.form.Details2.splice(index, 1);
    },
    addCorrectiveActionDetails() {
      this.initCorrectiveAction();
      this.correctiveActionShow = true;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      //this.correctiveAction.FinishDate = yy + "-" + mm + "-" + dd;
    },
    goDeptment() {
      this.deptmentShow = true;
    },
    up(index) {
      if (this.form.Details.length > 1 && index !== 0) {
        this.form.Details = this.swapItems(this.form.Details, index, index - 1);
      }
    },
    // 下移
    down(index) {
      if (
        this.form.Details.length > 1 &&
        index !== this.form.Details.length - 1
      ) {
        this.form.Details = this.swapItems(this.form.Details, index, index + 1);
      }
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    _chooseDeptmentCb(item) {
      // if (this.show1 || !this.form.AccidentDepartmentOrg) {
      //   this.form.AccidentDepartmentName = item.name;
      //   this.form.AccidentDepartmentOrg = item.code;
      //   this.deptmentShow = false;
      //   this.show1 = true;
      // } else {
      //   this.show1 = true;
      // }
      this.form.AccidentDepartmentName = item.name;
      this.form.AccidentDepartmentOrg = item.code;
      this.deptmentShow = false;
      // this.$set(this.form, "AccidentDepartmentName", item.name || "");
      // this.$set(this.form, "AccidentDepartmentOrg", item.value || "");
    },
    clearOrgCode() {
      this.form.AccidentDepartmentOrg = "";
      this.form.AccidentDepartmentName = "";
      this.$refs.deptmentChoose.clearOrgCode();
    },
    harmChange() {
      this.form.Harm = this.harmArr.join();
    },
    clearPeopleCode() {
      (this.correctiveAction.PersonLiable = ""),
        (this.correctiveAction.PersonLiableOrg = "");
    },
    initCorrectiveAction() {
      this.correctiveAction.CorrectiveAction = "";
      this.correctiveAction.PersonLiable = "";
      this.correctiveAction.FinishDate = null;
      this.correctiveAction.index = -1;
    },
    getUserChooseDialogShow1() {
      this.userChooseDialogShow1 = true;
    },
    getUserChooseDialogShow2() {
      this.initInvestigateGroup();
      this.userChooseDialogShow2 = true;
    },
    confirmCorrectiveAction() {
      if (!this.correctiveAction.CorrectiveAction) {
        this.$toast("请输入整改行动");
        return;
      }
      if (!this.correctiveAction.PersonLiable) {
        this.$toast("请输入责任人");
        return;
      }
      if (!this.correctiveAction.FinishDate) {
        this.$toast("请选择完成日期");
        return;
      }
      if (this.correctiveAction.index >= 0) {
        var editData = this.form.Details3[this.correctiveAction.index];
        editData.CorrectiveAction = this.correctiveAction.CorrectiveAction;
        editData.PersonLiable = this.correctiveAction.PersonLiable;
        editData.FinishDate = this.correctiveAction.FinishDate;
        editData.PersonLiableOrg = this.correctiveAction.PersonLiableOrg;
      } else {
        this.form.Details3.push({
          CorrectiveAction: this.correctiveAction.CorrectiveAction,
          PersonLiable: this.correctiveAction.PersonLiable,
          FinishDate: this.correctiveAction.FinishDate,
          PersonLiableOrg: this.correctiveAction.PersonLiableOrg,
        });
      }
      this.initCorrectiveAction();
      this.correctiveActionShow = false;
    },
    closeCorrectiveAction() {
      this.correctiveActionShow = false;
      this.correctiveAction.CorrectiveAction = null;
      this.correctiveAction.PersonLiable = null;
      this.correctiveAction.FinishDate = null;
    },
    editCorrectiveAction(data, index) {
      // this.$refs.eagleDate.get1();
      this.correctiveAction.CorrectiveAction = data.CorrectiveAction;
      this.correctiveAction.PersonLiable = data.PersonLiable;
      this.correctiveAction.FinishDate = data.FinishDate;
      this.correctiveAction.PersonLiableOrg = data.PersonLiableOrg;
      this.correctiveAction.index = index;
      this.correctiveActionShow = true;
    },
    deleteCorrectiveAction(index) {
      this.form.Details3.splice(index, 1);
    },
    addInvestigateGroupDetails() {
      this.investigateGroupShow = true;
    },
    explain(item) {
      if (this.form.ProcessClassification == "A") {
        this.title1 = "工艺安全事故分级标准";
      } else if (this.form.ProcessClassification == "B") {
        this.title1 = "非工艺安全事故分级标准";
      }

      this.TheRatingShow = true;
      this.$refs.ExplainList.getList({});
      // this.$router.push({
      //     path: "/ExplainList",
      //     query: { Type: this.form.ProcessClassification },
      // });
    },
    initInvestigateGroup() {
      this.investigateGroup.Role = "";
      this.investigateGroup.Name = "";
      this.investigateGroup.AccidentDuty = "";
      this.investigateGroup.Phone = "";
      this.investigateGroup.Email = "";
      this.investigateGroup.index = -1;
    },
    confirmInvestigateGroup() {
      if (!this.investigateGroup.Name) {
        this.$toast("请输入姓名");
        return;
      }
      if (this.investigateGroup.index >= 0) {
        var editData = this.form.Details4[this.investigateGroup.index];
        editData.Role = this.investigateGroup.Role;
        editData.Name = this.investigateGroup.Name;
        editData.AccidentDuty = this.investigateGroup.AccidentDuty;
        editData.Phone = this.investigateGroup.Phone;
        editData.Email = this.investigateGroup.Email;
      } else {
        this.form.Details4.push({
          Role: this.investigateGroup.Role,
          Name: this.investigateGroup.Name,
          AccidentDuty: this.investigateGroup.AccidentDuty,
          Phone: this.investigateGroup.Phone,
          Email: this.investigateGroup.Email,
        });
      }
      this.initInvestigateGroup();
      this.investigateGroupShow = false;
    },
    closeInvestigateGroup() {
      this.investigateGroupShow = false;
      this.investigateGroup.Role = null;
      this.investigateGroup.Name = null;
      this.investigateGroup.AccidentDuty = null;
      this.investigateGroup.Phone = null;
      this.investigateGroup.Email = null;
    },
    editInvestigateGroup(data, index) {
      this.investigateGroup.Role = data.Role;
      this.investigateGroup.Name = data.Name;
      this.investigateGroup.AccidentDuty = data.AccidentDuty;
      this.investigateGroup.Phone = data.Phone;
      this.investigateGroup.Email = data.Email;
      this.investigateGroup.index = index;
      this.investigateGroupShow = true;
    },
    deleteInvestigateGroup(index) {
      this.form.Details4.splice(index, 1);
    },
    onConfirm(date) {
      this.dateShow = false;
      this.correctiveAction.FinishDate = this.myFormatDate(date);
    },
    myFormatDate(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      if (m < 10) {
        m = 0 + "" + m;
      }
      if (d < 10) {
        d = 0 + "" + d;
      }
      return y + "-" + m + "-" + d; //格式可以在这调整
    },
    calcTitle() {
      let title = "调查报告[新增]";
      if (this.id != "0") {
        title = "调查报告[编辑]";
      }
      store.commit("updateTitle", title);
    },
  },
};
</script>
<style lang="less" scoped>
.valueclass {
  margin-right: 0.3rem;
  float: right;
}

.time-link-dialog {
  height: 9rem;
}

.factor-dialog {
  height: 4.5rem;
}

.corrective-action-dialog {
  height: 8rem;
}
/deep/.van-field__error-message {
  color: unset;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 30%;
    height: 30px;
    font-size: 12px;
  }
  .submit-only {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
  .submit-two {
    width: 48%;
    height: 30px;
    font-size: 12px;
  }
}

.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

/deep/ .van-collapse-item__content {
  padding: 0rem;
}

.report-block {
  background-color: #fff;
  margin-top: 0.5rem;
}
/deep/ .valueclass[data-v-f75fe2f8] {
  margin-right: 0.3rem;
  float: right;
  height: 23px;
  width: 50px;
}

/deep/ .cell-time-line {
  padding-top: 3px;
  .van-cell {
    padding-left: 0px;
  }
}
</style>